<template>
  <div class="s_c_n">
    <div class="init_search" v-if="searchStatus === 0">
      <!-- <video
        src="/half_circle.mp4"
        class="bjVideo"
        autoplay
        loop
        muted
      /> -->
      <div class="init_content">
        <div class="s_input">
          <div class="input">
            <el-select placeholder="请选择" v-model="selectVal" class="s_select">
              <el-option label="智能云搜" value="智能云搜" />
              <el-option label="人员轨迹" value="人员轨迹" />
              <el-option label="车辆轨迹" value="车辆轨迹" />
            </el-select>
            <input type="text" :placeholder="placeholderText" v-model="searchPost.keyword">
            <div class="s_btn" style="background:#0579E6;" @click="searchBtn">
              搜索
            </div>
          </div>
        </div>
      </div>
      <div class="show_infos">
        <div class="info" v-for="(t,i) in showMyInfos" :key="'info_'+i">
          <div class="info_title">
            <p>{{ t.title }}</p>
          </div>
          <div class="contents">
            <div class="content" v-for="(a, index) in t.list" :key="'content+'+index">
              <p>{{ a }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom_time">
        {{ bottom_time }}
      </div>
    </div>
    <div class="personList" v-if="searchStatus === 1">
      <div class="search_row">
        <el-row :gutter="10">
          <el-col :span="4">
            <el-input v-model="searchPost.keyword" placeholder="搜索关键词" />
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="searchBtn">
              查询
            </el-button>
            <el-button type="info" @click="reset">
              重置
            </el-button>
            <el-button type="info" @click="moreSearch = !moreSearch">
              高级筛选<el-icon class="el-icon--right">
                <ArrowUp v-show="moreSearch" />
                <ArrowDown v-show="!moreSearch" />
              </el-icon>
            </el-button>
          </el-col>
        </el-row>
        <div class="searchContent" v-show="moreSearch">
          <template v-for="c in moreSearchs">
            <div class="search_item" :key="c.value" v-if="c.data" v-show="c.show == activeTab">
              <div class="search_item_title">
                {{ c.name }}:
              </div>
              <el-input v-model="c.model[0]" v-if="c.value=='age'" style="width: 145px;height: 30px;margin-right: 10px;margin-top: 10px;" />
              <p v-if="c.value=='age'">
                至
              </p>
              <el-input v-model="c.model[1]" v-if="c.value=='age'" style="width: 145px;height: 30px;margin-left: 10px;margin-top: 10px;" />
              <div v-if="c.value === 'che_liang_pin_pai'">
                <el-autocomplete
                  v-model="c.keyword"
                  :fetch-suggestions="querySearch"
                  placeholder="请输入关键词"
                  clearable
                  @select="handleSelect"
                  style="width: 165%;"
                />
              </div>
              <el-select v-model="c.model" v-if="c.value !== 'age' && c.value !== 'che_liang_pin_pai'" class="search_select">
                <el-option v-for="item in c.data" :key="item.value" :value="item.value" />
              </el-select>
            </div>
          </template>
        </div>
      </div>
      <el-tabs v-model="activeTab" @tab-click="changeType" class="tabs_main">
        <el-tab-pane label="人员档案" name="ren_yuan_dang_an">
          <person-page ref="ren_yuan_dang_an" :more-searchs="moreSearchs" />
        </el-tab-pane>
        <el-tab-pane label="车辆档案" name="che_liang_dang_an">
          <vehicle-page ref="che_liang_dang_an" :more-searchs="moreSearchs" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed } from '@vue/reactivity'
import { ElMessage } from 'element-plus'
import moment from 'moment'
import { onMounted, ref, nextTick } from 'vue'
import personPage from './components/personPage.vue'
import vehiclePage from './components/vehiclePage.vue'
import { useRouter } from 'vue-router'
import rules from '@/utils/rules'
import { getClpp } from '@/api/retrieval'
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'

interface MoreSearch {
  name: string
  value: string
  store: string
  model: any
  show: string
  keyword?: string
  data: {
    value: string
    label: string
    active?: boolean
  }[]

}
// 数据初始化
const initDatas = () => ({
  searchStatus: 0,
  agVisible: false,
  searchPost: {
    keyword: '',
    xing_bie: '',
    xing_zheng_qu_hua: '',
    min_zu: '',
    che_liang_pin_pai: '',
    che_shen_yan_se: '',
    shi_yong_xing_zhi: '',
    che_liang_lei_xing: '',
    xian_suo_lei_xing: '',
    similarity: ''
  },
  selectVal: '智能云搜',
  bottom_time: '',
  activeTab: 'ren_yuan_dang_an',
  moreSearch: false,
  moreSearchs: [
    {
      name: '性别',
      value: 'xing_bie',
      store: 'xing_bie',
      model: '',
      show: 'ren_yuan_dang_an',
      data: [
        {
          value: '男',
          label: '男'
        },
        {
          value: '女',
          label: '女'
        }
      ]
    },
    {
      name: '年龄特征',
      value: 'age',
      store: 'age',
      model: '',
      show: 'ren_yuan_dang_an',
      data: []
    },
    {
      name: '车辆品牌',
      value: 'che_liang_pin_pai',
      store: 'che_liang_pin_pai',
      model: '',
      show: 'che_liang_dang_an',
      keyword: '',
      data: []
    },
    {
      name: '车身颜色',
      value: 'che_shen_yan_se',
      store: 'che_shen_yan_se',
      model: '',
      show: 'che_liang_dang_an',
      data: [
        {
          label: '黑',
          value: '黑',
          active: false
        },
        {
          label: '红',
          value: '红',
          active: false
        },
        {
          label: '白',
          value: '白',
          active: false
        },
        {
          label: '棕',
          value: '棕',
          active: false
        },
        {
          label: '黄',
          value: '黄',
          active: false
        },
        {
          label: '紫',
          value: '紫',
          active: false
        },
        {
          label: '蓝',
          value: '蓝',
          active: false
        },
        {
          label: '灰',
          value: '灰',
          active: false
        },
        {
          label: '粉',
          value: '粉',
          active: false
        },
        {
          label: '绿',
          value: '绿',
          active: false
        }
      ]
    },
    {
      name: '使用性质',
      value: 'shi_yong_xing_zhi',
      store: 'shi_yong_xing_zhi',
      model: '',
      show: 'che_liang_dang_an',
      data: []
    },
    {
      name: '车辆类型',
      value: 'che_liang_lei_xing',
      store: 'che_liang_lei_xing',
      model: '',
      show: 'che_liang_dang_an',
      data: [
        {
          label: '未知',
          value: '未知',
          active: false
        },
        {
          label: '轿车',
          value: '轿车',
          active: false
        },
        {
          label: '客车',
          value: '客车',
          active: false
        },
        {
          label: '货车',
          value: '货车',
          active: false
        },
        {
          label: '小车',
          value: '小车',
          active: false
        },
        {
          label: '大型客车',
          value: '大型客车',
          active: false
        },
        {
          label: '面包车',
          value: '面包车',
          active: false
        },
        {
          label: '小货车',
          value: '小货车',
          active: false
        },
        {
          label: '行人',
          value: '行人',
          active: false
        },
        {
          label: '二轮车',
          value: '二轮车',
          active: false
        },
        {
          label: '三轮车',
          value: '三轮车',
          active: false
        }
      ]
    }
  ] as MoreSearch[],
  keywordChange: '',
  showMyInfos: [
    {
      title: '人员信息',
      list: ['姓名', '证件号码', '手机号码', '性别', '民族', '更多...']
    },
    {
      title: '机动车信息',
      list: ['车牌号', '车身颜色', '车辆状态', '车辆类型', '车辆所属人', '更多...']
    },
    {
      title: '驾驶员信息',
      list: ['姓名', '证件号码', '手机号码', '准驾车型', '发证机关', '更多...']
    },
    {
      title: '住宿信息',
      list: ['姓名', '开房时间', '退房时间', '旅店名称', '旅店详址', '更多...']
    },
    {
      title: '售票信息',
      list: ['铁路购票', '民航购票', '客运购票', '更多...']
    }
  ]
})
// const props = defineProps(['a', 'type', 'info'])
// 路由
const router = useRouter()
const showMyInfos = ref(initDatas().showMyInfos)
// 时钟功能
const bottom_time = ref(initDatas().bottom_time)
const getNewDate = () => {
  window.setInterval(() => {
    bottom_time.value = moment().format('YYYY年MM月DD日 HH:mm:ss')
  }, 1000)
}
// 获取档案库数据数量接口
const searchStatus = ref(initDatas().searchStatus)

// 完善更多查询选项内容
const moreSearchs = ref(initDatas().moreSearchs)
const moreSearch = ref(initDatas().moreSearch)
const fullMoreSearch = async () => {
  // const res = await getClSyxz()
}

// 文件上传事件
const selectVal = ref(initDatas().selectVal)

// 重置
const searchPost = ref(initDatas().searchPost)
const activeTab = ref(initDatas().activeTab)
const reset = () => {
  Object.assign(searchPost.value, initDatas().searchPost)
  searchStatus.value = 0
  activeTab.value = 'ren_yuan_dang_an'
  moreSearchs.value.forEach(t => {
    if (t.value === 'age') {
      t.model = []
    } else {
      t.model = ''
    }
  })
}

// 默认显示input提示
const placeholderText = computed(() => {
  let n = ''
  if (selectVal.value === '智能云搜') {
    n = '请输入关键词'
  } else if (selectVal.value === '人员轨迹') {
    n = '请输入正确的身份证号或姓名'
  } else if (selectVal.value === '车辆轨迹') {
    n = '请输入正确的车牌号码'
  }
  return n
})

// 查询搜索方法
const keywordChange = ref(initDatas().keywordChange)
const ren_yuan_dang_an = ref()
const che_liang_dang_an = ref()
const searchBtn = () => {
  // 判断如果没有输入信息，则提示输入信息
  if (!searchPost.value.keyword) {
    ElMessage.warning('请输入关键词')
    return
  }
  // 这里判断下拉选择处选项，如果是人员/车辆轨迹，则直接跳转到对应页面中
  // 如果选择智能云搜，则进入条件判断
  switch (selectVal.value) {
    case '智能云搜':
      // 如果不是完整身份证号，则判断是否是和之前同样的查询内容,如果是，直接再当前页面进行查询
      if (keywordChange.value === searchPost.value.keyword) {
        searchStatus.value = 1
        nextTick(() => {
          ren_yuan_dang_an.value.init(searchPost.value)
          che_liang_dang_an.value.init(searchPost.value)
          jumpToTab(activeTab.value)
        })
        return
      }
      // 如果是首页点击，则正常进行查询，并且将查询内容更新到上一次查询内容参数keywordChange中，方便下次判断
      searchStatus.value = 1
      keywordChange.value = searchPost.value.keyword
      // 判断输入查询内容是否完整车牌号，如果是，只对车辆信息进行检索，并且跳转到车辆页面
      if (rules.vehicleNumRule.test(searchPost.value.keyword)) {
        nextTick(() => {
          che_liang_dang_an.value.init(searchPost.value)
          jumpToTab('che_liang_dang_an')
        })
      } else {
        // 如果不是，则正常查询
        nextTick(() => {
          ren_yuan_dang_an.value.init(searchPost.value)
          che_liang_dang_an.value.init(searchPost.value)
          jumpToTab(activeTab.value)
        })
      }
      break
    case '人员轨迹':
      router.push({
        path: '/retrieval/toPerson',
        query: {
          keyword: /[\u4e00-\u9fa5]/.test(searchPost.value.keyword)
            ? ''
            : searchPost.value.keyword,
          name: /[\u4e00-\u9fa5]/.test(searchPost.value.keyword)
            ? searchPost.value.keyword
            : ''
        }
      })
      break
    case '车辆轨迹':
      router.push({
        path: '/retrieval/toVehicle',
        query: {
          keyword: searchPost.value.keyword
        }
      })
      break
  }
}

// 模糊搜索方法
const querySearch = (queryString: string, cb: any) => {
  getClpp({ keyword: queryString }).then(res => {
    const list = [] as any[]
    res.data.forEach((item: any) => {
      const t = {
        label: item.key,
        value: item.key,
        active: false
      }
      list.push(t)
    })
    moreSearchs.value.forEach(item => {
      if (item.value === 'che_liang_pin_pai') {
        if (!cb) {
          item.data = list
        } else {
          cb(list)
        }
      }
    })
  })
}

// 模糊搜索选择
const handleSelect = () => {
  moreSearchs.value.forEach(item => {
    if (item.value === 'che_liang_pin_pai') {
      item.data.forEach(t => {
        t.active = false
      })
    }
  })
}

// 切换人员/车辆tab页
const changeType = (tab: any, event: any) => {
  jumpToTab(tab.props.name)
}
const jumpToTab = (tab: string) => {
  activeTab.value = tab
}

// 初始化方法
onMounted(() => {
  getNewDate()
  fullMoreSearch()
})
</script>

<script lang="ts">
export default {
  name: 'ToSearch'
}
</script>
<style lang="scss" scoped>
.s_c_n {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  --el-input-border-color: var(--el-border-color);
  .el-input {
    --el-input-border-color: #4c4d4f;
    margin-bottom: 12px;
  }
  .init_search {
    width: 100%;
    height: 100%;
    position: relative;
    > .init_content {
      position: absolute;
      top: 20%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      width: 700px;
      .s_input .input {
        width: 100%;
      }
      .s_select {
        width: 100px;
        .el-select .el-input .el-input__inner {
          color: #fff;
          font-weight: bold;
          --el-input-bg-color: #8291A9;
        }
        &.el-select .el-input .el-select__caret {
          color: #fff;
        }
      }
    }
    .show_infos {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      width: 1000px;
      height: 200px;
      display: flex;
      .info {
        flex: 0 0 19%;
        width: 19%;
        height: 100%;
        margin-right: 1%;
        background: var(--show-infos-info-bkg-color);
        border-radius: 10px 10px 0 0;
        display: flex;
        flex-flow: column nowrap;
        .info_title {
          width: 100%;
          height: 40px;
          line-height: 40px;
          background: var(--show-infos-bkg-color);
          font-size: 14px;
          font-weight: 700;
          text-align: left;
          border-radius: 10px 10px 0 0;
          p {
            margin-left: 20px;
          }
        }
        .contents {
          flex: 1;
          display: flex;
          flex-flow: column nowrap;
          .content {
            flex: 1;
            text-align: left;
            &:first-child {
              margin-top: 10px;
            }
            &:last-child {
              margin-bottom: 10px;
            }
            p {
              margin-left: 20px;
              color: var(--show-infos-p-color)
            }
          }
        }
      }
    }
    .bottom_time {
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translate(-50%, 0);
      font-weight: bold;
      color: #0579e6;
      font-size: 16px;
    }
    .bjVideo {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      object-fit: cover;
    }
  }
  .s_input {
    display: flex;
    height: 35px;
    line-height: 35px;
    position: relative;
    .input {
      width: 25%;
      display: flex;
      background: #8291A9;
      border-radius: 5px;
      overflow: hidden;
      position: relative;
      input {
        border: none;
        flex: 1;
        overflow: hidden;
        padding: 0 20px;
        &:focus {
          outline: none;
        }
      }
      > i {
        position: absolute;
        right: 60px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        color: #7a7a7a;
        cursor: pointer;
      }
    }
  }
  .s_btn {
    padding: 0 10px;
    color: #fff;
    background: #055972;
    border-radius: 5px;
    cursor: pointer;
  }
  .personList {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    .search_row {
      width: 98%;
      margin: 0 auto;
      height: auto;
      line-height: 60px;
    }
    .tabs_main {
      width: 98%;
      flex: 1;
      margin: 0 auto;
    }
    .searchContent {
      margin: 10px 0 20px 0;
      background: var(--search-content-bkg-color);
      border-radius: 10px;
      .search_item {
        display: flex;
        flex-flow: row nowrap;
        line-height: 50px;
        .el-radio-group {
          line-height: 50px;
        }
        .search_item_title {
          width: 80px;
          margin: 0 20px;
          color: #999999;
          font-size: 12px;
          text-align: right;
        }
        .search_select {
          margin-top: 10px;
          width: 20%;
        }
      }
    }
  }
  .tabs {
    display: flex;
    > p {
      margin-right: 30px;
      margin-left: 10px;
      font-weight: 700;
      color: #000;
      cursor: pointer;
    }
    .chosen {
      color: #00b8ff;
    }
  }
}

//修改div自带滚动条样式
*::-webkit-scrollbar,
.scroll_style::-webkit-scrollbar {
  //滚动条整体样式
  width: 6px;
  height: 1px;
  background: #161D26;
}
*::-webkit-scrollbar-thumb,
.scroll_style::-webkit-scrollbar-thumb {
  //滚动的滑块
  background-color: #283442;
  border-radius: 3px;
  height: 120px;
}
*::-webkit-scrollbar-track,
.scroll_style::-webkit-scrollbar-track {
  //外层轨道
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  background: #161D26;
}
</style>
<style lang="scss">
html.dark .s_c_n {
  --show-infos-bkg-color: #283442;
  --show-infos-info-bkg-color: #1f2935cc;
  --show-infos-p-color: #fff;
  --search-content-bkg-color: #1F2935;
  .el-input {
    --el-input-border-color: var(--el-border-color);
    margin-bottom: 12px;
  }
  .init_search {
    background: url('@/assets/retrieval/half_circle.jpg') no-repeat;
    background-size: 100% 100%;
  }
}
html.light .s_c_n {
  --show-infos-bkg-color: #8291A9;
  --show-infos-info-bkg-color: #edf4fbcc;
  --show-infos-p-color: #606266;
  .init_search {
    background: url('@/assets/retrieval/toSearch_bkg.jpg') no-repeat;
    background-size: 100% 100%;
  }
}
.tabs_main {
  .el-tabs__header {
    .el-tabs__nav-wrap {
      &::after {
        background-color: #0000;
      }
    }
  }
}
.init_content {
  .s_input {
    .input {
      .s_select {
        .el-input__wrapper {
          background: #8291A9;
          box-shadow: none;
        }
        .el-input__wrapper:hover {
          box-shadow: none;
        }
      }
    }
  }
}
.s_c_n {
  .el-select .el-input .el-select__caret.el-icon {
    color: #fff;
  }
}

</style>
